import React, { useEffect, useState } from 'react'
import './TodoList.css'
import TodoFooter from './TodoFooter/TodoFooter'
import TodoMain from './TodoMain/TodoMain'
import TodoHeader from './ToduHeader/TodoHeader'
// import { v4 as uuidv4 } from 'uuid';
import request from '../../utils/request'
// import axios from 'axios'
export default function TodoList() {
  let [todos,setTodos]=useState([
    // {
    //   id:1,
    //   title:'今天真是個好日子',
    //   done:false
    // },
    // {
    //   id:2,
    //   title:'today is a good day',
    //   done:true
    // }
  ])
  let [to,setTo]=useState(true)
  // let axioss=axios.create({
  //   baseURL:'http://localhost:3001/todos',
  //   method:'get',
  // })
//添加
  let addTodos=async(val)=>{
    setTo(false)
    // let todo={
    //   id:uuidv4(),
    //   title:val,
    //   done:false
    // }
    try {
      let res= await request({
        url:'/todos',
        method:'post',
        data:{
          title:val
        }
    })
    // console.log(res);
    setTodos([...todos,res.data])
    } catch (error) {
      console.log(error);
    }
    
  }
//是否选中
  let checkTodo=async(id,done)=>{
    await request({
      url:'/dos',
      method:'post',
      data:{
        id,
        done
      }
    })
    let todo=todos.map(item=>{
      if (item._id===id) {
        item.done=done 
      }
     return item
    })
    setTodos(todo)
  }
//单个删除
  let delTodos=async(id)=>{
    // let todo=todos.filter(item=>{
    //   if(item.id===id)return false
    //   return true
    // })
    request.delete(`/todos?id=${id}`)
    let todo=todos.filter(item=>{
      if(item._id===id)return false
      return true
    })
    // console.log(todo);
    setTodos(todo)
  }
//清除全部完成的
let allDelTodos=async()=>{
  await request({
    method:'post',
    url:'/tododel',
  })
  let todo=todos.filter((item)=>{
    return !item.done
  })
  setTodos(todo)
}
//全部完成
let allNumber=(()=>{
  if (!todos.length)return false
  return todos.every((item)=>{
    return item.done===true
  })
})()
// console.log(a);
let allWin= async(done)=>{
  // console.log(done);
  await request({
    url:'/alldos',
    method:'post',
    data:{
      done
    }
  })
  let todo=todos.filter(item=>{
    if (!allNumber) {
       item.done=true
    }else{
      item.done=false
    }
    return true
  })
  setTodos(todo)
}
//查询已完成
let allNum=(()=>{
  let todo=todos.filter(item=>{
    return item.done===true
  })
  return todo.length
})()

useEffect(()=>{
  // axios.get('http://localhost:3001/todos').then(res=>{
  //   // console.log(res);
  //   setTodos(res.data)
  // })
  let getData=async ()=>{
  try {
    let response=await request({
      method:'get',
      url:'/todos'
      })
      // console.log(response);
    setTodos(response.data)
  } catch (error) {
    console.log(error);
  }
}
// console.log('更新啦');
  
 getData()
},[])

  useEffect(()=>{
    // addTodos(15616156)
    // checkTodo(1,true)
    // delTodos(2)
    // allDelTodos()
    // allWin()
  },[])

  return (
    <div className="todo-container">
    <div className="todo-wrap">
    <TodoHeader addTodos={addTodos}/>
    <TodoMain todos={todos} checkTodo={checkTodo} delTodos={delTodos} to={to}/>
    <TodoFooter allDelTodos={allDelTodos} allWin={allWin} todos={todos} allNum={allNum} allNumber={allNumber}/>  
    </div>
  </div>
  )
}
